<template>
    <div>
        <el-drawer title="通知详情" v-model="drawerShow" 
            direction="rtl" :before-close="handleClose" :size="900"
            :close-on-click-modal="false">
            <div class="detail_container" v-loading="isLoading">
                <div class="detail_title">
                    <h3>{{ noticeDetailInfo.noticeTitle || '-' }}</h3>
                    <span class="tag_icon top_icon" v-if="noticeDetailInfo.isTopStatus == 1">置顶</span>
                    <span class="tag_icon important_icon" v-if="noticeDetailInfo.isImportant >= 0">重要</span>
                    <span class="tag_icon urgent_icon" v-if="noticeDetailInfo.isUrgent >= 0">紧急</span>
                </div>
                <p>发布类型：<span>{{ noticeDetailInfo.noticeTypeName || '-' }}</span></p>
                <p class="notice_creator">发布人：<el-tag type="warning">{{ noticeDetailInfo.noticeSenderName || '-' }}</el-tag></p>
                <p class="nitice_time">发布时间：<span>{{ formatDate.dateTimeAllFormat( noticeDetailInfo.publishDate || '') }}</span></p>
                <p class="notice_users">
                    <div style="width: 72px;">通知对象：</div>
                    <div style="width: 780px;">
                        <el-tag v-for="(uItem, uIndex)  in noticeDetailInfo.receiverNameList" :key="uIndex" class="margin-right-sm margin-bottom-sm">{{ uItem }}</el-tag>
                    </div>
                </p>
                <div class="detail_content">
                    <div class="read_info">
                        <div>
                            <span>已读 {{ noticeDetailInfo.readNum || '0' }} 人</span>
                            <el-divider direction="vertical" />
                            <span>未读 {{ noticeDetailInfo.unReadNum || '0' }} 人</span>
                        </div>
                    </div>
                    <div class="content">
                        <div v-html="richText" class="ql-editor"></div>
                    </div>
                </div>
                <div v-if="noticeDetailInfo.fileList && noticeDetailInfo.fileList.length">
                    <p class="margin-bottom-md">附件信息</p>
                    <ul>
                        <li v-for="fItem in noticeDetailInfo.fileList" class="flex">
                            <i class="icon-base icon-base-appendix" 
                                style="font-size: 20px;margin-top: 2px;color: #27A3FF;margin-right: 10px;"></i>
                            <p style="width: 450px;color: #999;font-size: 14px;">{{ fItem.name }}</p>
                            <el-button link type="primary" @click="downLoadFile(fItem)">下 载</el-button>
                        </li>
                    </ul>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="handleClose">关 闭</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>
<script setup>
    import { ref, watch } from "vue"
    import { noticeDetail } from "@/api/notice.js"
    import { formatDate } from "@/utils/fomart"
    const props = defineProps(['show', 'data']);
    const emit = defineEmits(['update:show', 'close']);
    const drawerShow = ref(false);
    const noticeDetailInfo = ref({});
    const richText = ref('');
    const isLoading = ref(false);
    watch(() => props.show, () => {
        drawerShow.value = props.show;
        if(drawerShow.value) getNoticeDetail();
    }, { deep: true });
    const downLoadFile = (item) => {
        window.open(item.url);
    };
    const handleClose = () => {
        drawerShow.value = false;
        emit('update:show', false);
        emit('close')
    };
    const getNoticeDetail = () => {
        isLoading.value = true;
        noticeDetail({
            id: props.data.id,
            managerType: props.data.managerType,
        }).then(res => {
            isLoading.value = false;
            noticeDetailInfo.value = res.data || {};
            richText.value = noticeDetailInfo.value.noticeContent; // 提取通知内容
            // 以下均为格式转换的垃圾代码 看看接口返回就懂了这垃圾代码怎么来的了
            noticeDetailInfo.value.receiverNameList = noticeDetailInfo.value.receiverNames 
                ? noticeDetailInfo.value.receiverNames.split(',') : []; // 通知对象字符串转换
            noticeDetailInfo.value.noticeImportanceList = noticeDetailInfo.value.noticeImportanceName 
                ? noticeDetailInfo.value.noticeImportanceName .split(',') : []; // 重要程度字符串转换
            noticeDetailInfo.value.isImportant = noticeDetailInfo.value.noticeImportanceList.findIndex( item => item == '重要');
            noticeDetailInfo.value.isUrgent = noticeDetailInfo.value.noticeImportanceList.findIndex( item => item == '紧急');
            noticeDetailInfo.value.fileList = []; // 附件最离谱，两个数组拼接，而且拼接前还得将url字符串转一次
            noticeDetailInfo.value.attachUrls = noticeDetailInfo.value.attachUrls ? noticeDetailInfo.value.attachUrls.split(',') : [];
            if(noticeDetailInfo.value.attachUrlNames && noticeDetailInfo.value.attachUrlNames.length){
                noticeDetailInfo.value.attachUrlNames.map( (item, index) => {
                    const obj = { name: item, url: noticeDetailInfo.value.attachUrls[index] }
                    noticeDetailInfo.value.fileList.push(obj);
                });
            }
        });
    };
</script>
<style scoped lang="scss">
    :deep(.el-drawer__body){
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        padding: 10px 20px;
    }
    :deep(.ql-editor img){
        width: 100%;
    }
    .detail_container{
        .tag_icon{
            padding: 2px 4px;
            font-size: 12px;
            border-radius: 3px;
        }
        .top_icon{ background-color: #eee; }
        .important_icon{ background-color: #F5222D;color: #fff; }
        .urgent_icon{  background-color: #F59A23;color: #fff; }
        p{
            font-size: 14px;
            padding: 3px 0;
        }
        .detail_title{
            display: flex;
            margin-bottom: 5px;
            span{
                margin-left: 5px;
            }
        }
        .notice_creator{
            .el-tag{
                margin-left: 13px;
            }
        }
        .nitice_time{
            span{
                color: #999;
            }
        }
        .notice_users{
            display: flex;
            .el-tag{
                margin-right: 5px;
            }
        }
        .detail_content{
            .read_info{
                margin-top: 10px;
                font-size: 14px;
                display: flex;
                justify-content: flex-end;
                span:first-child{
                    color: #999;
                }
                span:last-child{
                    color: #1890FF;
                }
            }
            .content{
                margin: 5px 0 5px;
                border: 1px solid #eee;
                border-radius: 5px;
                min-height: 340px;
            }
        }
    }
</style>